/**
 * Created by huotaol on 2017/10/14.
 */
import React from "react";
import {connect} from "react-redux";
import {Button, Card, Col, DatePicker, Form, Row, Select} from "antd";
import {fetchData, receiveData} from "@/action";
import CustomBarChart from "@/components/chart/CustomBarChart";
import {get} from "@/axios/tools";
import {bindActionCreators} from "redux";

const Option = Select.Option;
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;
const FORMAT_DATE = 'YYYY-MM-DD';

class WaiterScoreStatistic extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data: [],
        };
    }


    componentDidMount() {
        this._requestData();
    }

    _requestData = param => {
        const {auth: auth = {data: {}}} = this.props;
        if (auth.data.restaurant) {
            if (!param) {
                param = {start: '', end: ''};
            }
            get('/restaurant/waiterScoreStatistic', {
                restaurantID: auth.data.restaurant,
                start: param.start, end: param.end
            }).then(
                data => {
                    this.setState({data});
                }
            );
        }
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let {time} = values;
                let data = {start: '', end: ''};
                if (time && time.length) {
                    data = {
                        start: time[0].format(FORMAT_DATE),
                        end: time[1].format(FORMAT_DATE),
                    };
                }
                this._requestData(data);
            }
        });
    };


    render() {
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        return (
            <div className="content-container">
                <div className="gutter-example">
                    <Form layout="inline" onSubmit={this.handleSubmit}>
                        <FormItem
                        >
                            {getFieldDecorator('time', {})(
                                <RangePicker  />
                            )}
                        </FormItem>
                        <FormItem>
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                搜索
                            </Button>
                        </FormItem>
                    </Form>
                    <div className="space-bar"></div>
                    {
                        [{title: '总消费排行', dataKey: 'orderSum',dataName:'消费金额'},
                            {title: '消费次数排行', dataKey: 'orderCount',dataName:'消费次数'},
                            {title: '总得分排行', dataKey: 'totalScore',dataName:'评价得分'}].map(item =>
                            <Row gutter={16} key={item.dataKey}>
                                <Col className="gutter-row" md={24}>
                                    <div className="gutter-box">
                                        <Card title={item.title} bordered={false}>
                                            <CustomBarChart data={this.state.data} dataKey={item.dataKey} dataName={item.dataName}/>
                                        </Card>
                                    </div>
                                </Col>
                            </Row>
                        )
                    }

                </div>
            </div>
        );
    }
}


const mapStateToPorps = state => {
    const {auth} = state.httpData;
    return {auth};
};
const mapDispatchToProps = dispatch => ({
    fetchData: bindActionCreators(fetchData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});

export default connect(mapStateToPorps, mapDispatchToProps)(Form.create()(WaiterScoreStatistic));